<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="InfoBox inform users about a specific task and may contain critical information. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>InfoBox - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">InfoBox</a></li>
                    <li class="toc-entry"><a href="#_infobox_about">About</a></li>
                    <li class="toc-entry">
                        <a href="#_infobox_create">Create InfoBox</a>
                        <ul>
                            <li class="toc-entry"><a href="#_infobox_create_predefined">Predefined</a></li>
                            <li class="toc-entry"><a href="#_infobox_create_runtime">Runtime</a></li>
                            <li class="toc-entry"><a href="#_infobox_types">Types</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_infobox_options">Options</a></li>
                    <li class="toc-entry"><a href="#_infobox_events">Events</a></li>
                    <li class="toc-entry"><a href="#_infobox_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_infobox_object">InfoBox object</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>InfoBox</h1>
                <p class="text-leader">
                    Metro 4 provides the ability to easily create information boxes. InfoBox can be predefined or created in runtime.
                </p>

                <!-- ads-html -->

                <h3 id="_infobox_about">About</h3>
                <p class="text-small">New in 4.2.7</p>
                <p>
                    InfoBox inform users about a specific task and may contain critical information.
                    InfoBox has next structure:
                </p>
                <div class="example">
                    <div class="row flex-justify-center">
                        <div class="cell-md-6">
                            <div class="info-box pos-relative d-block z-1">
                                <span class="button square closer"></span>
                                <div class="info-box-content">
                                    <h3>What is Lorem Ipsum?</h3>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;div class="info-box"&gt;
                        &lt;span class="button square closer"&gt;&lt;/span&gt;
                        &lt;div class="info-box-content"&gt;
                            ...
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_infobox_create">Create InfoBox</h3>
                <p>
                    Metro 4 provides two ways for create InfoBox:
                </p>
                <ul>
                    <li>Predefined method</li>
                    <li>Runtime method</li>
                </ul>

                <h4 id="_infobox_create_predefined">Predefined method</h4>
                <p>
                    First-off you must create <code>HTML</code> element with special structure.
                    Then add any options over <code>data-*</code> attributes.
                    And at the end add an attribute <code>data-role="infobox"</code> to your element for initialization <code>InfoBox</code>.
                    After the initialization, the dialog will be hidden until it is called.
                </p>
                <pre><code>
                    &lt;div class="info-box" data-role="infobox"&gt;
                        &lt;span class="button square closer"&gt;&lt;/span&gt;
                        &lt;div class="info-box-content"&gt;
                            &lt;h3&gt;What is Lorem Ipsum?&lt;/h3&gt;
                            &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <div class="example">
                    <div class="info-box" id="info-box-1" data-role="infobox">
                        <span class="button square closer va-middle"></span>
                        <div class="info-box-content">
                            <h3>What is Lorem Ipsum?</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </div>
                    </div>
                    <div class="">
                        <button class="button" onclick="$('#info-box-1').data('infobox').open()">Open InfoBox</button>
                    </div>
                </div>

                <h4 id="_infobox_create_runtime">Create InfoBox at runtime</h4>
                <p>
                    To create <code>InfoBox</code> at <code>runtime</code> you mus execute method <code>Metro.infobox.create</code> with required parameters and options.
                </p>
                <div class="example">
                    <button class="button" onclick="createInfoBox()">Create InfoBox</button>
                </div>
                <pre><code>
                    var html_content =
                        "&lt;h3&gt;What is Lorem Ipsum?&lt;/h3&gt;" +
                        "&lt;p&gt;Lorem Ipsum is simply dummy text...&lt;/p&gt;";
                    Metro.infobox.create(html_content);
                </code></pre>

                <h4 id="_infobox_types">InfoBox types</h4>
                <p>
                    You can create five type of InfoBoxes: <code>default</code>, <code>success</code>, <code>info</code>, <code>warning</code> and <code>alert</code>.
                    To create it you must use attribute <code>data-type="..."</code> with a corresponding values for predefined InfoBoxes oe second parameter for <code>Metro.infobox.create</code> method.
                </p>
                <pre><code>
                    &lt;div class="info-box" data-role="infobox" data-type="alert"&gt;
                        &lt;span class="button square closer"&gt;&lt;/span&gt;
                        &lt;div class="info-box-content"&gt;
                            &lt;h3&gt;What is Lorem Ipsum?&lt;/h3&gt;
                            &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
                <pre><code>
                    Metro.infobox.create("&lt;p&gt;Lorem Ipsum is simply dummy text...&lt;/p&gt;", "alert");
                </code></pre>
                <div class="example">
                    <button class="button" onclick="createInfoBox()">Default</button>
                    <button class="button success" onclick="createInfoBox('success')">Success</button>
                    <button class="button info" onclick="createInfoBox('info')">Info</button>
                    <button class="button alert" onclick="createInfoBox('alert')">Alert</button>
                    <button class="button warning" onclick="createInfoBox('warning')">Warning</button>
                </div>

                <!-- ads-html -->

                <h3 id="_infobox_options">Options</h3>
                <p>
                    You can set any options to define InfoBox:
                </p>
                <table class="table table-border cell-border options-table mt-2">
                    <thead>
                    <tr>
                        <td>Options</td>
                        <td>Data-*</td>
                        <td>Default</td>
                        <td>Description</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>type</td>
                        <td><code>data-type</code></td>
                        <td></td>
                        <td>Set InfoBox type: default, success, info, alert and warning</td>
                    </tr>
                    <tr>
                        <td>width</td>
                        <td><code>data-width</code></td>
                        <td>480</td>
                        <td>Set InfoBox width</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td><code>data-height</code></td>
                        <td>auto</td>
                        <td>Set InfoBox height</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td><code>data-height</code></td>
                        <td>auto</td>
                        <td>Set InfoBox height</td>
                    </tr>
                    <tr>
                        <td>overlay</td>
                        <td><code>data-overlay</code></td>
                        <td>true</td>
                        <td>Add overlay when InfoBox is opened</td>
                    </tr>
                    <tr>
                        <td>overlayColor</td>
                        <td><code>data-overlay-color</code></td>
                        <td>#000000</td>
                        <td>Overlay color. Can be hex color value or transparent</td>
                    </tr>
                    <tr>
                        <td>overlayAlpha</td>
                        <td><code>data-overlay-alpha</code></td>
                        <td>0.5</td>
                        <td>Overlay color alpha channel value.</td>
                    </tr>
                    <tr>
                        <td>autoHide</td>
                        <td><code>data-auto-hide</code></td>
                        <td>0</td>
                        <td>If this options &gt; 0, InfoBox closed after this timeout in milliseconds</td>
                    </tr>
                    <tr>
                        <td>removeOnClose</td>
                        <td><code>data-remove-on-close</code></td>
                        <td>false</td>
                        <td>If this options is <code>true</code> InfoBox will be removed after closes from DOM</td>
                    </tr>
                    <tr>
                        <td>closeButton</td>
                        <td><code>data-close-button</code></td>
                        <td>true</td>
                        <td>Hide close InfoBox button</td>
                    </tr>
                    <tr>
                        <td>clsBox</td>
                        <td><code>data-cls-box</code></td>
                        <td></td>
                        <td>Additional class for InfoBox</td>
                    </tr>
                    <tr>
                        <td>clsBoxContent</td>
                        <td><code>data-cls-box-content</code></td>
                        <td></td>
                        <td>Additional class for InfoBox content block</td>
                    </tr>
                    <tr>
                        <td>clsOverlay</td>
                        <td><code>data-cls-overlay</code></td>
                        <td></td>
                        <td>Additional class for InfoBox overlay</td>
                    </tr>
                    <tr>
                        <td>onOpen</td>
                        <td><code>data-on-open</code></td>
                        <td>Metro.noop</td>
                        <td>This <code>callback</code> executed after InfoBox is open</td>
                    </tr>
                    <tr>
                        <td>onClose</td>
                        <td><code>data-on-close</code></td>
                        <td>Metro.noop</td>
                        <td>This <code>callback</code> executed after InfoBox is close</td>
                    </tr>
                    <tr>
                        <td>onInfoBoxCreate</td>
                        <td><code>data-on-info-box-create</code></td>
                        <td>Metro.noop</td>
                        <td>This <code>callback</code> executed after InfoBox is created</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_infobox_events">Events</h3>
                <p>
                    When InfoBox works, it generated a number of events. You can use callbacks to these events to interact with it.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Events</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onOpen(elem)</code></td>
                        <td><code>data-on-open</code></td>
                        <td>Fired when InfoBox is open</td>
                    </tr>
                    <tr>
                        <td><code>onClose(elem)</code></td>
                        <td><code>data-on-close</code></td>
                        <td>Fired when InfoBox is close</td>
                    </tr>
                    <tr>
                        <td><code>onInfoBoxCreate(elem)</code></td>
                        <td><code>data-on-info-box-create</code></td>
                        <td>Fired when InfoBox was created</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <button class="button" onclick="infoBoxEventsExample1()">Open InfoBox</button>
                </div>
                <pre><code>
                    ...html
                    &lt;button class="button" onclick="infoBoxEventsExample1()"&gt;Open InfoBox&lt;/button&gt;

                    ...javascript
                    function infoBoxEventsExample1() {
                        var el = Metro.infobox.create(
                                "This is a simple InfoBox. Wait...",
                                "",
                                {
                                    closeButton: false,
                                    onOpen: function(){
                                        var ib = $(this).data("infobox");
                                        setTimeout(function(){
                                            ib.setContent("Content can be changed at runtime. Wait...");
                                            setTimeout(function(){
                                                ib.setContent("Type also can be changed. Wait...");
                                                ib.setType("alert");
                                                setTimeout(function(){
                                                    ib.setType("info");
                                                    setTimeout(function(){
                                                        ib.setType("warning");
                                                        setTimeout(function(){
                                                            ib.setContent("Say goodbye...");
                                                            ib.setType("success");
                                                            setTimeout(function(){
                                                                ib.close();
                                                            }, 2000)
                                                        }, 2000)
                                                    }, 2000)
                                                }, 2000)
                                            }, 2000)
                                        }, 2000)
                                    }
                                }
                        );
                    }
                </code></pre>

                <h3 id="_infobox_methods">Methods</h3>
                <p>
                    To interact with component you can use methods:
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Method</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>open()</code></td>
                        <td>Use this method to open InfoBox</td>
                    </tr>
                    <tr>
                        <td><code>close()</code></td>
                        <td>Use this method to close InfoBox</td>
                    </tr>
                    <tr>
                        <td><code>setContent(c)</code></td>
                        <td>Use this method to change InfoBox content</td>
                    </tr>
                    <tr>
                        <td><code>setType(t)</code></td>
                        <td>Use this method to change InfoBox type</td>
                    </tr>
                    <tr>
                        <td><code>isOpen()</code></td>
                        <td>Use this method to check InfoBox state</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_infobox_object">InfoBox object</h3>
                <p>
                    Metro 4 contains special object <code>Metro.infobox</code> to manipulate <code>InfoBoxes</code>.
                    This object contains next methods:
                </p>
                <ul>
                    <li><strong>create(text, type, options, not_open)</strong> - create InfoBox</li>
                    <li><strong>open(el, content, type)</strong> - open InfoBox</li>
                    <li><strong>close(el)</strong> - close InfoBox</li>
                    <li><strong>isInfoBox(el)</strong> - check if element is InfoBox instance</li>
                    <li><strong>isOpen(el)</strong> - check if InfoBox is open</li>
                    <li><strong>setContent(content)</strong> - Set InfoBox content</li>
                    <li><strong>setType(type)</strong> - Set InfoBox type</li>
                </ul>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <script>
        function createInfoBox(t){
            if (t === undefined) {
                t = "";
            }

            var html_content =
                "<h3>What is Lorem Ipsum?</h3>" +
                "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>";

            Metro.infobox.create(
                "<h3>What is Lorem Ipsum?</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>",
                t
            );
        }

        function infoBoxEventsExample1() {
            var el = Metro.infobox.create(
                    "This is a simple InfoBox. Wait...",
                    "",
                    {
                        closeButton: false,
                        onOpen: function(){
                            var ib = $(this).data("infobox");
                            setTimeout(function(){
                                ib.setContent("Content can be changed at runtime. Wait...");
                                setTimeout(function(){
                                    ib.setContent("Type also can be changed. Wait...");
                                    ib.setType("alert");
                                    setTimeout(function(){
                                        ib.setType("info");
                                        setTimeout(function(){
                                            ib.setType("warning");
                                            setTimeout(function(){
                                                ib.setContent("Say goodbye...");
                                                ib.setType("success");
                                                setTimeout(function(){
                                                    ib.close();
                                                }, 2000)
                                            }, 2000)
                                        }, 2000)
                                    }, 2000)
                                }, 2000)
                            }, 2000)
                        }
                    }
            );
        }
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>